<template>
    <div class="my">
        <top-bar class="topBar"></top-bar>
        <my-order class="myOrder"></my-order>
        <address-infor class="addressInfor"></address-infor>
        <extra-surprise class="extraSurprise"></extra-surprise>
        <my-products @getData="getTitle" :list="dataList" class="myProducts"></my-products>



    <div style="height: 2000px;"></div>
    </div>
</template>

<script>
import TopBar from '../../../components/My/TopBar.vue'
import MyOrder from '../../../components/My/MyOrder.vue'
import AddressInfor from '../../../components/My/AddressInfor.vue'
import ExtraSurprise from '../../../components/My/ExtraSurprise.vue'
import MyProducts from '../../../components/My/MyProducts.vue'


export default {
    name: 'my',
    components: {
        // 前面是真实組件，後面是組件的一个任意名字与import后面的那个SearchBar名字保持相同;也可以只写一个中间,号隔开
        TopBar:TopBar,
        MyOrder:MyOrder,
        AddressInfor:AddressInfor,
        ExtraSurprise:ExtraSurprise,
        MyProducts:MyProducts
       
    },
    data(){
        return{
      dataList:[] //1、后台给我的数据都是存放在data里面的，而且属于的是大父组件里面的;必须先声明,否则mounted里的this.dataList找不到存放位置就会直接报错
        }
    },
    mounted() {
    setTimeout(()=>{
      this.dataList = [
        {
          name:"品牌: 店家广告语是什么",
          backgrond:require("../../../assets/images/forumProducts/1printer.jpg"), //如果这里出不来多数都是少了require这个必须项
          imgrond:require("../../../assets/images/forumProducts/1printer.jpg"),
          fen:"1.2万粉丝"
        },
        {
          name:"品牌: 店家广告语是什么",
          backgrond:require("../../../assets/images/forumProducts/2paper.jpg"),
          imgrond:require("../../../assets/images/forumProducts/2paper.jpg"),
          fen:"2.5万粉丝"

        },
        {
          name:"品牌: 店家广告语是什么",
          backgrond:require("../../../assets/images/forumProducts/3computer.jpg"),
          imgrond:require("../../../assets/images/forumProducts/3computer.jpg"),
          fen:"10万粉丝"
        },
        {
          name:"品牌: 店家广告语是什么",
          backgrond:require("../../../assets/images/forumProducts/4desk.jpg"),
          imgrond:require("../../../assets/images/forumProducts/4desk.jpg"),
          fen:"50万粉丝"

        },
        {
          name:"品牌: 店家广告语是什么",
          backgrond:require("../../../assets/images/forumProducts/5sofa.jpg"),
          imgrond:require("../../../assets/images/forumProducts/5sofa.jpg"),
          fen:"3.6万粉丝"
        },
        {
          name:"品牌: 店家广告语是什么",
          backgrond:require("../../../assets/images/forumProducts/6photobook.jpg"),
          imgrond:require("../../../assets/images/forumProducts/6photobook.jpg"),
          fen:"4.2万粉丝"

        },
        {
          name:"品牌: 店家广告语是什么",
          backgrond:require("../../../assets/images/forumProducts/7fridge.jpg"),
          imgrond:require("../../../assets/images/forumProducts/7fridge.jpg"),
          fen:"6.6万粉丝"

        },
        {
          name:"品牌: 店家广告语是什么",
          backgrond:require("../../../assets/images/forumProducts/8microoven.jpg"),
          imgrond:require("../../../assets/images/forumProducts/8microoven.jpg"),
          fen:"110万粉丝"

        },
        {
          name:"品牌: 店家广告语是什么",
          backgrond:require("../../../assets/images/forumProducts/9washer.jpg"),
          imgrond:require("../../../assets/images/forumProducts/9washer.jpg"),
          fen:"26万粉丝"

        },
        {
          name:"品牌: 店家广告语是什么",
          backgrond:require("../../../assets/images/forumProducts/10tv.jpg"),
          imgrond:require("../../../assets/images/forumProducts/10tv.jpg"),
          fen:"300万粉丝"

        }
      ]
    },1000)
  },
  methods: {
    getTitle(data){      //5.拿到这个函数的值输出
      console.log(data);
    }
  },

}
</script>

<style lang="less" scoped>
    .my{
        background-color: #EFF6F7;
    }

</style>